<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery-3.6.1.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/layui@2.6.8/dist/css/layui.css"
    />
    <script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
  </head>
  <style>
    img{
        width: 100px;
      height: 100px;
      border-radius: 50px;
    }
    body{
        position: relative;
        right: 1px;
    }
    .layui-nav-side {
      height:830px;
    position: absolute;
      top: 60px;
      right: 1px;
    }
    .layui-nav {
      border-radius: 0;
    }
    .layui-nav :nth-child(4) {
      float: right;
      margin-right: 100px;
    }
    /* .box {
      /* width: 100%; */
      /* height: 895px; */
      /* background-color: white; */
      /* border: 1px solid white; */
    /* } */ 
    .box1{
        margin-left: 200px;
        width: 86%;
        height: 500px;
        /* background-color: whitesmoke; */
        /* border: 1px solid gray; */
        position: relative;
        top:120px;
        overflow-x: hidden ;
        overflow-x:none ;
    }
    .cha {
      width: 45px;
      background-color: lightskyblue;
      border: 1px solid lightskyblue;
      border-radius: 2px;
      color: white;
    }
    .bian {
      width: 45px;
      background-color: lightskyblue;
      border: 1px solid lightskyblue;
      border-radius: 2px;
      color: white;
    }
    .zhu {
      width: 45px;
      background-color: orange;
      border: 1px solid orange;
      border-radius: 2px;
      color: white;
    }
    table{
        text-align: center;

    }
    .add-car-box {
        background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4cef10aa-9887-4b84-b290-0fd2d3be7554%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1684655253&t=b23b087e33c709f7f16a372dc4ab760a);
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: fixed;
        top: 40%;
        left: 40%;
        margin-top: -200px;
        margin-left: -200px;
        display: none;
        text-align: center;
      }
      #btn{
        width: 100px;
        height: 30px;
        background-color: lightblue;
        border: 1px solid lightblue;
        color: white;
    }
    #deladd{
        width: 100px;
        height: 30px;
        background-color: lightblue;
        border: 1px solid lightblue;
        color: white;
        opacity: 0.8;
    }
    h1{
        color: gray;
    }
    #form{
        color: white;
        opacity: 0.8;
    }
    #zx {
      width: 550px;
      height: 650px;
      border-top: 1px solid black;
     margin-left: 200px;
     display: none;
    }  
    .chabox {
    
        width: 600px;
        height: 400px;
        border: 1px solid black;
        position: fixed;
        bottom: 10%;
        left: 40%;
        margin-top: -200px;
        margin-left: -200px;
        display: none;
        text-align: center;
        background-color: whitesmoke;
      }
      #X{
        float: right;
        position: relative;
        left: -28px;
        font-size: 20px;
      }
      .xiubox {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: fixed;
        top: 40%;
        left: 40%;
        margin-top: -200px;
        margin-left: -200px;
        display: none;
        text-align: center;
        background-color: whitesmoke;
      }
      #delxiu{
        width: 100px;
        height: 30px;
        background-color: lightblue;
        border: 1px solid lightblue;
      }
      #xiubtn{
        width: 100px;
        height: 30px;
        background-color: lightblue;
        border: 1px solid lightblue;
      }
      .layui-btn{
        width: 100px;
        position: relative;
        left:206px;
        top:122px;
      }
      #delete{
        width: 100px;
        height: 38px;
        background-color: #009688;
        color: white;
        border: 1px solid #009688;
        position: relative;
        left:206px;
        top:124px;
      }
  </style>
  <body>
    <div class="box">
      <ul class="layui-nav">
        <li class="layui-nav-item">
          <a href="">控制台<span class="layui-badge">9</span></a>
        </li>                                                                                                                                                                                                                                                                                                                                                        
        <li class="layui-nav-item">
          <a >个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item">
          <a href=""
            ><img
              src="./img/微信图片_20221111140800.jpg"
              class="layui-nav-img"
            />我</a
          >
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item">
          <a id="Theme">Theme</a>
          <dl class="layui-nav-child">
            <dd onclick="changeBgColor('#FFFFFF')"> <a href="javascript:;" id="Light" >Light</a></dd>
            <dd onclick="changeBgColor('#464a58')"><a href="javascript:;"  id="Dark">Dark</a></dd>
          </dl>
        </li>
      </ul>
      <ul class="layui-nav layui-nav-tree layui-nav-side">
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">歌曲</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" id="biaoge"> 表格</a></dd>
            <dd><a href="javascript:; " id="grzx">个人中心</a></dd>
          </dl>
        </li>
      </ul>
      <button class="layui-btn">添加</button>
      <button id="delete" onclick="deltttFun()">批量删除</button>
      <div class="box1">
 
        <div class="add-car-box">
            <h1 style="margin-left: 40px">添加歌曲</h1>
            <br>
            <form action="#" id="form">
                &emsp;姓名:<input type="text" name="" id="title"><br><br>
                &emsp;歌人:<input type="text" name="" id="artist"><br><br>
                &emsp;专辑:<input type="text" name="" id="album"><br><br>
                &emsp;类型:<input type="text" name="" id="genre"><br><br>
                &emsp;年份:<input type="text" name="" id="year"><br><br>
                <br><br>
                <input type="submit" id="btn" value="添加" >
            </form>
            <br>
            <button id="deladd">取消添加</button>
          </div>
          <br>

          <br><br>
        <table border="1px" style="width: 1250px">
            <thead>
              <th><input type="checkbox" id="all"></th>
              <th>编号</th>
              <th>名称</th>
              <th>歌人</th>
              <th>专辑</th>
              <th>类型</th>
              <th>年份</th>
              <th>操作</th>
            </thead>
            <tbody>
            </tbody></div>
            <div class="chabox">
                <div class="cha1">
           <span id="X">X</span>
                </div>
            <ul>
              &emsp;<li class="li1">编号: <span id="ids"></span></li>
              &emsp;<li class="li1">名称: <span id="names"></span></li>
              &emsp;<li class="li1">歌手: <span id="ges"></span></li>
              &emsp;<li class="li2">专辑: <span id="zuaj"></span></li> 
              &emsp;<li class="li1">类型: <span id="stypes"></span></li>
              &emsp;&emsp;<li class="li3">年份:<span id="years"></span></li>
            </ul>
              </div>
              <div class="xiubox">
                <h1 style="margin-left: 40px">修改歌曲</h1>
                <form action="#" id="form">
                  &emsp;姓名:<input type="text" name="" id="titles"><br><br>
                  &emsp;歌人:<input type="text" name="" id="artists"><br><br>
                  &emsp;专辑:<input type="text" name="" id="albums"><br><br>
                  &emsp;类型:<input type="text" name="" id="genres"><br><br>
                  &emsp;年份:<input type="text" name="" id="yearss"><br><br>
                  <br><br>
                  <input type="submit" id="xiubtn" value="修改" >
                </form>
<br>
                <br>
                <button id="delxiu">取消修改</button>
            </div>
      <div id="zx">
        <br />
        头像: <img src="./img/微信图片_20221111140800.jpg" alt="" srcset="" /><br /><br />
        昵称: <input type="text" name="" id="ursename" value="无敌暴龙战士" /><br /><br />
        性别: <input type="radio" name="sex" id="sexone" value="男" checked />男
        <input type="radio" name="sex" id="sextwo" value="女" /> 女<br /><br />
        出生日期: <input type="date" name="data" id="data" value="2006-10-17" /><br /><br />
        籍贯:
        <select name="" id="sheng" onchange="sheng()">
          <option value="">省</option>
          <option value="山东省">山东省</option>
          <option value="河南省">河南省</option>
        </select>
        <select name="" id="shi" onchange="shi()">
          <option value="">市</option>
          <option value="菏泽市">菏泽市</option>
          <option value="郑州市">郑州市</option>
        </select>
        <select name="" id="qu" onchange="qu()">
          <option value="">区</option>
          <option value="牡丹区">牡丹区</option>
          <option value="荥阳市">荥阳市</option>
        </select>
        <br /><br />
        手机号码: <input type="text" name="" id="iphone"  value="1566504605"/><br /><br />
        电子邮箱: <input type="email" name="" id="email" value="liyanyang1017@qq.com " /><br /><br />
        <br /><br />

      </div>
    </div>
    <script> 
//全选
  $("#all").click(function () {
 $("td input[name='choose']").each(function () {
  console.log($(this));
 $(this).prop("checked", $("#all").prop("checked"));
 
 });

 });
    // 本地存储改变颜色 
function changeBgColor(color) {
document.body.style.backgroundColor = color;
localStorage.setItem("bgColor", color);
}

window.onload = function () {
var bgColor = localStorage.getItem("bgColor");
if (bgColor) {
document.body.style.backgroundColor = bgColor;
}
};
//个人中心
   $('#grzx').click(function(){
   $('#zx').show()
   $('table').hide()
   $('.layui-btn').hide()
   $('#delete').hide()
   });
//表格
   $('#biaoge').click(function(){
    $('#zx').hide()
    $('table').show()
    $('.layui-btn').show()
   });
   //渲染
   (function(){
    ShowList()
        $("tbody").click(tbodyFun);

   })()
   //渲染列表
  function ShowList(){
    $.ajax({
    url: "http://81.68.107.245/api/songs",
    type: "get",
    dataType: 'json',
    data:{
    page:1,
    pageSize:200,
    },
    success: function(data){
        console.log(data.data);
     if (data.code=='200') {
      Show(data.data) 
     }else{
      alert(data.msg)
     }
    }
   });
  }

  $('tbody tr td').click(function(){
    console.log(2);
  })
//显示表格
function Show(data) {
    event.preventDefault()
   let html = ''
   $(data).each(function(index,item){
    html += `
      <tr>
        <td class="checkbox"><input type="checkbox" data-id=${item.id} name='choose' /></td>
       <td >${item.id}</td>
       <td>${item.title}</td>
       <td>${item.artist}</td>
       <td >${item.album}</td>
       <td>${item.genre}</td>
       <td >${item.year}</td>
       <td >
        <button class="cha" data-id=${item.id}>查看</button>
        <button class="bian"  data-id=${item.id}>编辑</button>
        <button data-id=${item.id} class="zhu">删除</button>
       </td>
      </tr>
    `
   })
   $('tbody').html(html)
  }

  $('.layui-btn').click(function(){
 $('.add-car-box').show()
  })
  $('#deladd').click(function(){
    $('.add-car-box').hide()

  })
  $('#X').click(function(){
    $('.chabox').hide()
  })

  //添加
  $('#btn').click(function(){
    if(confirm('确定要添加吗?')){
      event.preventDefault()

    $.ajax({
    url: "https://mp3.zzgoodqc.cn/api/songs",
    type: "POST",
    dataType: 'json',
    headers: {'Content-Type': 'application/json'},
    data:JSON.stringify({
        title:$('#title').val(),
        artist:$('#artist').val(),
        album:$('#album').val(),
        genre:$('#genre').val(),
        year:$('#year').val(),
    }),
    success: function(data){
        if(data.code == '201'){
          alert('添加成功')
          $('.add-car-box').hide()
          ShowList();
        }else{
          alert('添加失败')
          console.log(data.msg);
        }
    }
   });
    }
  })

//批量删除
    function deltttFun() {
   let con = confirm("确认删除选中吗?");
   if (con == true) {
    $("tbody tr td input:checked").each(function (index, item) {
     var id = $(item).attr("data-id");
     $.ajax({
      url: "https://mp3.zzgoodqc.cn/api/songs/" + id,
      type: "DELETE",
      dataType: "json",
      success: function (res) {
       console.log(res);
       if (res.code == 200) {
        ShowList()
        $("#all").prop("checked", false);
       }
      },
     });
    });
   }
  }
//删除
  function tbodyFun(e) {
    event.preventDefault()
    let id = event.target.dataset.id;
    if(e.target.innerHTML == "删除"){
      if(confirm('确定要删除吗?')){
    $.ajax({
    url: "https://mp3.zzgoodqc.cn/api/songs/"+id,
    type: "DELETE",
    dataType: 'json',
    success: function(data){
      console.log(data);
      if(data.code=='200'){
        alert('删除成功')
        ShowList()
      }else{
        alert('删除失败')
      }
    }
    })
  }
}
//查看
if(e.target.innerHTML=='查看'){
event.preventDefault()
$.ajax({
    url: "https://mp3.zzgoodqc.cn/api/songs/"+id,
    type: "GET",
    dataType: 'json',
    success: function(data){
      if(data.code == '200'){
          alert('查看成功')
          $('.chabox').show()
          chaboxList(data.data)
        }else{
          alert('查看失败')
          console.log(data.msg);
        }
    }
      })

  }
  //编辑
  if(e.target.innerHTML=='编辑'){
  event.preventDefault()
  $('#xiubtn').html('修改')
    $('.xiubox').show()
  $.ajax({
    url: "https://mp3.zzgoodqc.cn/api/songs/"+id,
    type: "GET",
    dataType: 'json',
    success: function(data){
      $('#titles').val(data.data.title),
     $('#artists').val(data.data.artist),
     $('#albums').val(data.data.album),
     $('#genres').val(data.data.genre),
     $('#yearss').val(data.data.year)
    }
      })
    }
    }
  //编辑
  $('#xiubtn').click(function(){
    event.preventDefault();
    let ids= $('.bian').attr('data-id');
    console.log(ids);
    $.ajax({
        url: "http://81.68.107.245/api/songs/"+ids,
        type: "PUT",
        dataType: "json",
        headers: {'Content-Type': 'application/json'},
        data:JSON.stringify({
          title:$('#titles').val(),
        artist:$('#artists').val(),
       album:$('#albums').val(),
        genre:$('#genres').val(),
       year:$('#yearss').val(),
        }),
        success: function (data) {
          Show(data.data);
          console.log(data);
          if(data.code=='200'){
         alert('修改成功')
            chaboxList(data)
          ShowList()

            $('.xiubox').hide()
          }else{
            alert('修改失败')
          }
        },
      });
   }) 
 //查看渲染
  function chaboxList(data){
  $('#ids').text(data.id)
  $('#names').text(data.title)
  $('#ges').text(data.artist)
  $('#zuaj').text(data.album)
  $('#stypes').text(data.genre)
  $('#years').text(data.year)
    }
//编辑渲染
    function xiuboxList(data){
    $('#titles').val(data.title),
   $('#artists').val(data.artist),
   $('#albums').val(data.album),
   $('#genres').val(data.genre),
   $('#yearss').val(data.year)
  }
  
$('#delxiu').click(function(){
  $('.xiubox').hide()
})

 
    </script>
  </body>
</html>
